<template>
    <div class="nav-comp ">
        <div class="nav flex_space_between " :class="shadow ? 'gshadow':''">
            <div class="left slide flex_start" @click="leftClick">
                <van-icon v-if="!noLeft" name="arrow-left" color="#ffffff" size="18px" />
            </div>
            <div class="title">{{title}}</div>
            <div class="right slide flex_end" @click="rightClick">
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

<script>

import { mapState } from "vuex";

export default {
    props: {
        title: {
            type: String,
            default: ""
        },

        // 高亮文字颜色
        shadow: {
            type: Boolean,
            default: true
        },

        noLeft: {
            type: Boolean,
            default: false
        },


    },

    data() {
        return {
            show: false
        };
    },

    methods: {
        // 返回按钮
        leftClick() {
            this.$emit("click-left")
        },

        rightClick() {
            this.$emit("click-right")
        }
    },

    computed: {
        ...mapState({
            userRole: state => state.userRole
        })
    }
};
</script>

<style lang="scss" scoped>
@import "@/assets/color.scss";

.nav-comp {
    width: 100%;
    height: 50px;
}

.nav {
    width: 100%;
    height: 50px;
    color: #ffffff;
    background-color: $BG_COLOR;
    font-size: 18px;
    padding: 0 10px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;

    .slide {
        width: 40px;
    }
}
</style>
